🚀 Bài 12: DOM Nâng cao & JavaScript Event

let selectedItem = null;
let itemCounter = 4;

// Hàm chọn item (highlight)
function selectItem(element, id) {
    // 1. Bỏ selection cũ
    document.querySelectorAll('.deletable-item').forEach(item => {
        item.style.border = '2px solid transparent';
        item.style.background = '#d4edda';
    });
    
    // 2. Highlight item được chọn
    element.style.border = '2px solid #667eea';
    element.style.background = '#e3f2fd';
    selectedItem = element;
    
    // 3. Cập nhật thông báo
    document.getElementById('deleteResult').innerHTML = 
        `<strong>Đã chọn:</strong> "${element.textContent}" - Có thể xóa hoặc thay thế`;
    
    // Update HTML source if tab is active
    if (document.getElementById('htmlTab').classList.contains('active')) {
        refreshHTMLSource();
    }
}

// Hàm xóa item được chọn
function deleteSelected() {
    if (selectedItem) {
        const text = selectedItem.textContent;
        
        // Modern way: element tự xóa chính nó
        selectedItem.remove();
        selectedItem = null;
        
        document.getElementById('deleteResult').innerHTML = 
            `<strong>remove():</strong> Đã xóa "${text}" - Phần tử tự xóa chính nó`;
        
        // Update HTML source if tab is active
        if (document.getElementById('htmlTab').classList.contains('active')) {
            refreshHTMLSource();
        }
    } else {
        document.getElementById('deleteResult').textContent = 'Vui lòng chọn một item trước khi xóa!';
    }
}

// Hàm thay thế item được chọn
function replaceSelected() {
    if (selectedItem) {
        const newContent = document.getElementById('replaceContent').value || 'Nội dung mặc định';
        const oldText = selectedItem.textContent;
        
        // 1. Tạo phần tử mới
        const newElement = document.createElement('div');
        newElement.className = 'deletable-item';
        newElement.textContent = newContent;
        
        // 2. Style cho phần tử mới
        newElement.style.background = '#d1ecf1';
        newElement.style.padding = '10px';
        newElement.style.margin = '5px 0';
        newElement.style.borderRadius = '5px';
        newElement.style.cursor = 'pointer';
        newElement.style.border = '2px solid transparent';
        
        // 3. Gắn event listener
        newElement.onclick = function() { selectItem(this, itemCounter++); };
        
        // 4. Thay thế element cũ bằng mới
        selectedItem.replaceWith(newElement);
        selectedItem = null;
        
        document.getElementById('deleteResult').innerHTML = 
            `<strong>replaceWith():</strong> "${oldText}" → "${newContent}"`;
        document.getElementById('replaceContent').value = '';
        
        // Update HTML source if tab is active
        if (document.getElementById('htmlTab').classList.contains('active')) {
            refreshHTMLSource();
        }
    } else {
        document.getElementById('deleteResult').textContent = 'Vui lòng chọn một item trước khi thay thế!';
    }
}

// Hàm thêm item mới
function addNewItem() {
    const container = document.getElementById('deleteContainer');
    
    // 1. Tạo element mới
    const newItem = document.createElement('div');
    newItem.className = 'deletable-item';
    newItem.textContent = `📄 Item ${itemCounter} - Click để chọn`;
    
    // 2. Style
    newItem.style.background = '#d4edda';
    newItem.style.padding = '10px';
    newItem.style.margin = '5px 0';
    newItem.style.borderRadius = '5px';
    newItem.style.cursor = 'pointer';
    newItem.style.border = '2px solid transparent';
    
    // 3. Event listener
    newItem.onclick = function() { selectItem(this, itemCounter); };
    
    // 4. Thêm vào container
    container.appendChild(newItem);
    
    document.getElementById('deleteResult').innerHTML = 
        `<strong>createElement + appendChild:</strong> Đã thêm Item ${itemCounter}`;
    itemCounter++;
    
    // Update HTML source if tab is active
    if (document.getElementById('htmlTab').classList.contains('active')) {
        refreshHTMLSource();
    }
}

function resetDeleteDemo() {
    const container = document.getElementById('deleteContainer');
    
    // Khôi phục HTML ban đầu
    container.innerHTML = `
        <div class="deletable-item" style="background:#d4edda; padding:10px; margin:5px 0; border-radius:5px; cursor:pointer; border:2px solid transparent;" onclick="selectItem(this, 1)">
            📄 Item 1 - Click để chọn
        </div>
        <div class="deletable-item" style="background:#d4edda; padding:10px; margin:5px 0; border-radius:5px; cursor:pointer; border:2px solid transparent;" onclick="selectItem(this, 2)">
            📄 Item 2 - Click để chọn  
        </div>
        <div class="deletable-item" style="background:#d4edda; padding:10px; margin:5px 0; border-radius:5px; cursor:pointer; border:2px solid transparent;" onclick="selectItem(this, 3)">
            📄 Item 3 - Click để chọn
        </div>
    `;
    
    selectedItem = null;
    itemCounter = 4;
    document.getElementById('deleteResult').innerHTML = 'Reset: Đã khôi phục lại demo ban đầu';
    
    // Update HTML source if tab is active
    if (document.getElementById('htmlTab').classList.contains('active')) {
        refreshHTMLSource();
    }
}